<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .size {
            width: 100px;
            height: 100px;
        }
        
        .bg {
            background: grey;
        }
    </style>
</head>

<body>
    <!-- <div id="app">
        <h3>类名的绑定</h3>
        <div class="size bg"></div>

        <h3>对象的形式</h3>
        <div :class="{'size':true,'bg':true}"></div>
        <hr>
        <div :class="{size,bg}"></div>
        <hr>
        <div :class="{size:flag,bg:flag}"></div>
        <hr>
        <div :class="{size:fn(),bg:flag}"></div>

        <h3>数组的形式</h3>
        <div :class="[size,bg]"></div>
        <hr>
        <div :class="['size','bg']"></div>
        <hr>
        <div :class="[size,flag?bg:'']"></div>
        <hr>
        <div :class="[classadd(),bg]"></div>
    </div> -->
</body>
<!-- <script src="../../basic/vue.js"></script> -->
<script>
    // new Vue({
    //     el: '#app',
    //     data: {
    //         flag: true,
    //         size: 'size',
    //         bg: 'bg'
    //     },
    //     methods: {
    //         fn() {
    //             return 10 > 3
    //         },
    //         classadd() {
    //             return this.flag ? this.size : ''
    //         }
    //     }
    // })

    var test = function(a) {
        this.a = a;
        return function(b) {
            return this.a + b;
        }
    }(function(a, b) {
        return a;
    }(11, 45));
    var result = test(7);
    console.log(result);
</script>

</html>